<template>
  <div class="box">
    <h1>父组件</h1>
    <h2>{{ money }}</h2>
    <button @click="money += 1000">加钱</button>
    <Son></Son>
  </div>
</template>

<script>
/*
  语法：
    提供数据：
      provide('key',value)
    获取数据：
      const value = inject('key')

  我们可以使用一对 provide 和 inject。
  优势：无论组件层次结构有多深，父组件都可以作为其所有子组件的依赖提供者。
  这个特性有两个部分：父组件有一个 provide 选项来提供数据，子组件有一个 inject 选项来开始使用这些数据。
*/
import Son from './components/Son16.vue'
import { provide, ref } from 'vue'
export default {
  components: { Son },
  setup() {
    const money = ref(10000)
    // provide('key',value)
    provide('money', money)
    provide('changeMoney', (val) => { money.value -= val })
    return { money }
  },
}
</script>

<style></style>
